<template>
  <div id="app">
    <List
      :items="items"
      :size="60"
      :shownumber="10"
    />
  </div>
</template>

<script setup>
// ------------------------------------- 导入模块 ----------------------------------
// 导入 vue3 的 API
import { computed } from 'vue'
// 导入列表组件
import List from './components/List.vue'

// ------------------------------------- 声明数据 ----------------------------------
// 模拟要进行渲染的数据列表
const items = computed(() => {
  // 自己模拟一万条数据，将其内容进行填充
  return Array(10000).fill('').map((item, index) => ({
    id: index,
    content: '列表项内容' + index
  }))
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
